import { copyText, isArray, isEmpty, isMobile } from "esy-tools"
import { CopyOutlined, Message, PaymentOutlined, Toast } from "esy-ui"
import React, { useState } from "react"
import { useTranslation } from "react-i18next"
import { Prism as SyntaxHighLighter } from "react-syntax-highlighter"

interface DescProps {
    // "span" | "tag" | "p" | "a" | "texts"
    textType?: string
    text?: string
    texts?: DescProps[]
    href?: string
}

/** 单个卡片显示的数据格式 */
interface ListItem {
    titleKey: string
    hash: string
    coms: React.ReactNode[]
    comsJson: string[]
    desc?: DescProps[]
}

/** 两栏布局 */
interface DocCardBoxProps {
    leftList: ListItem[]
    rightList: ListItem[]
}

interface DocCardProps {
    list: ListItem[]
}

function Texts(props: Required<Pick<ListItem, "desc">>) {
    const { t } = useTranslation()
    const { desc } = props

    return desc.map((ds, i) => {
        if (!ds.text && !ds.texts) return null
        switch (ds.textType) {
            case "p":
                return (
                    <p key={`ds-p${ds.text}${i}`} className="text-sm py-0.5">
                        {t(ds.text as string)}
                    </p>
                )
            case "tag":
                return (
                    <span key={`ds-btn${ds.text}${i}`} className="py-0.5 px-1.5 mx-0.5 text-sm rounded-sm bg-gray-200">
                        {t(ds.text as string)}
                    </span>
                )
            case "a":
                return (
                    <a key={`ds-btn${ds.text}${i}`} className="py-0.5 px-1.5 mx-0.5 text-sm rounded-sm text-primary underline" href={ds.href}>
                        {t(ds.text as string)}
                    </a>
                )
            case "texts":
                return (
                    <p className="py-0.5" key={`ds-ts${ds.text}${i}`}>
                        <Texts desc={ds.texts as DescProps[]} />
                    </p>
                )
            case "tip":
                return (
                    <span key={`ds-btn${ds.text}${i}`} className="py-0.5 px-1.5 mx-0.5 text-sm rounded-sm text-red-400">
                        {t(ds.text as string)}
                    </span>
                )
            default:
                return (
                    <span key={`ds-sp${ds.text}${i}`} className="text-sm">
                        {t(ds.text as string)}
                    </span>
                )
        }
    })
}

function DocCard(props: DocCardProps) {
    const { list } = props
    const { t } = useTranslation()
    const [actHash, setActHash] = useState<string | null>(null)

    const onCopy = (str: string) => {
        copyText(str)
            .then(() => {
                if (isMobile()) {
                    Toast.show({ content: t("copySuccess") })
                } else {
                    Message.show({ content: t("copySuccess") })
                }
            })
            .catch(() => {
                if (isMobile()) {
                    Toast.show({ content: t("copyFailed") })
                } else {
                    Message.show({ content: t("copyFailed") })
                }
            })
    }

    if (isArray(list) && !isEmpty(list)) {
        return list.map((it, i) => (
            <div key={it.titleKey || i} id={it.hash} className="flex flex-col border border-solid rounded-sm border-boundary self-start">
                <div className="flex items-center justify-between text-text-1 py-5 px-6">
                    <h1 className="text-xl">{t(it.titleKey)}</h1>
                    <div className="flex items-center gap-3 text-sm text-text-1">
                        {/* <CubeOutlined className="hover:text-primary cursor-pointer" /> */}
                        <CopyOutlined
                            className="hover:text-primary cursor-pointer"
                            onClick={() => {
                                onCopy(it.comsJson[0])
                            }}
                        />
                        <PaymentOutlined
                            className="hover:text-primary cursor-pointer"
                            onClick={() => {
                                setActHash(actHash !== it.hash ? it.hash : null)
                            }}
                        />
                    </div>
                </div>
                {isArray(it.desc) && !isEmpty(it.desc) ? (
                    <div className="px-6">
                        <Texts desc={it.desc as []} />
                    </div>
                ) : null}
                {isArray(it.coms) && !isEmpty(it.coms) ? <div className="px-6 py-5">{it.coms?.map((nd, idx) => <React.Fragment key={idx}>{nd}</React.Fragment>)}</div> : null}
                {actHash && it.hash === actHash ? (
                    <pre className="border-t border-solid border-boundary show-thumb">
                        <SyntaxHighLighter language="typescript">{it.comsJson[0]}</SyntaxHighLighter>
                    </pre>
                ) : null}
            </div>
        ))
    }
    return null
}

function DocCardBox(props: DocCardBoxProps) {
    const { leftList, rightList } = props

    return (
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-[16px]">
            <div className="grid gap-[16px] grid-cols-1 self-start">
                <DocCard list={leftList} />
            </div>
            <div className="grid gap-[16px] grid-cols-1 self-start">
                <DocCard list={rightList} />
            </div>
        </div>
    )
}

export default DocCardBox
